<template lang="pug">
    //商品详情
    transition(name="fade")
        .commodity-detail-show(v-if="isDetail")
            //类型
            .commodity-detail-type(v-for="(item,index) in list" :key="index" v-show="index===type")
                //类型中的单个
                .commodity-detail-item(v-for="(cell,flag) in item.cell" :key="flag" v-show="flag===num")
                    .detail-title {{cell.name}}
                        span.callback(@click="closeDetail")
                            span.back-left
                            span.back-right
                    //异步加载轮播图的情况
                    Swiper(v-if="cell.imgDetail.length > 0").detail-banner
                        Slide(v-for="item in cell.imgDetail").slide
                            img(:src='item.url')
                    .detail-introduce
                        h2 {{cell.name}}
                        h4 {{cell.introduce}}
                        h3.pay ${{cell.pay}}
                    .bottom-button
                        span.add-shop-car(@click="addShow") 加入购物车
                        router-link(to='/shopCar').now-buy 立即购买
                    //灰色的背景
                    transition(name="fade2")
                        .add-shop-item(v-show="isAddShow" @click="closeAddShow")
                            .add-shop-content(@click="StopBubbling")
                                span.add-shop-introduce
                                    img(:src="cell.url")
                                    span.add-shop-text
                                        .add-shop-name {{cell.name}}
                                        .add-shop-pay ${{cell.pay}}
                                span.add-shop-num
                                    span.reduce(@click="reduce" :class="{noAddReduce:noReduceClick}") -
                                    .add-shop-number(v-for="(postItem,postIndex) in list" :key="postIndex" v-if="postIndex===type")
                                        .iitem-number(v-for="(postCell,postFlag) in postItem.cell" v-if="postFlag===num")
                                            .input {{firstShopNumber}}
                                    span.add(@click="plus" :class="{noAddReduce:noAddClick}") +
</template>

<script>
    import EndLine from "./EndLine";

    export default {
        name: "commodityDetailShow",
        components: {EndLine},
        props: ['type', 'num', 'isDetail', 'number'],
        data() {
            return {
                list: [
                    {
                        name: "休息零食",
                        P: "P1",
                        cell: [
                            {
                                name: "夏威夷果",
                                pay: 20,
                                url: require('../../public/img/home/commodity/fruit1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/fruit1.png')},
                                    {url: require("../../public/img/home/commodity/fruit2.png")},
                                    {url: require("../../public/img/home/commodity/fruit3.png")},
                                ],
                                introduce: "夏威夷果含有丰富的钙，磷 ，铁，维生素B1、B2和人体必需的8种氨基酸。"
                            },
                            {
                                name: "好吃的糖果",
                                pay: 40,
                                url: require('../../public/img/home/commodity/sweets1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/sweets1.png')},
                                    {url: require("../../public/img/home/commodity/sweets2.png")},
                                ],
                                introduce: "糖果是糖果糕点的一种，指以糖类为主要成份的一种小吃。"
                            }
                        ]
                    },
                    {
                        name: "精品服饰",
                        P: "P2",
                        cell: [
                            {
                                name: "卡通T恤",
                                pay: 120,
                                url: require('../../public/img/home/commodity/Tshirt1.png'),
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/Tshirt1.png')},
                                    {url: require("../../public/img/home/commodity/Tshirt2.png")},
                                ],
                                introduce: ""
                            },
                            {
                                name: "直男衬衫",
                                pay: 140,
                                url: require('../../public/img/home/commodity/shirt1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shirt1.png')},
                                    {url: require("../../public/img/home/commodity/shirt2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "手机数码",
                        P: "P3",
                        cell: [
                            {
                                name: "笔记本电脑",
                                pay: 5020,
                                url: require('../../public/img/home/commodity/computer1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/computer1.png')},
                                    {url: require("../../public/img/home/commodity/computer2.png")},
                                ],
                                introduce: "笔记本电脑是一种小型、可方便携带的个人电脑。"
                            },
                            {
                                name: "炫酷耳机",
                                pay: 1140,
                                url: require('../../public/img/home/commodity/headset1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/headset1.png')},
                                    {url: require("../../public/img/home/commodity/headset2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "户外运动",
                        P: "P4",
                        cell: [
                            {
                                name: "时尚运动鞋",
                                pay: 520,
                                url: require('../../public/img/home/commodity/shoe1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shoe1.png')},
                                    {url: require("../../public/img/home/commodity/shoe2.png")},
                                    {url: require("../../public/img/home/commodity/shoe3.png")}
                                ],
                                introduce: ""
                            },
                            {
                                name: "斯伯丁篮球",
                                pay: 240,
                                url: require('../../public/img/home/commodity/basketball1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/basketball1.png')},
                                    {url: require("../../public/img/home/commodity/basketball2.png")}
                                ],
                                introduce: "不易漏气变形，不易开胶起皮，篮球制作工艺复杂严格，球体坚固耐用。"
                            }
                        ]
                    }
                ],
                noReduceClick: true,
                noAddClick: false,
                // 是否显示添加栏
                isAddShow: false,
                // 显示添加栏的数量默认值为1
                firstShopNumber: 0,
                postList: [0, 0, 0, 0, 0, 0, 0, 0],
                commodityList: []
            }
        },
        methods: {
            // 添加栏目按钮
            addShow() {
                this.isAddShow = true;
                this.firstShopNumber = this.number;
            },
            // 关闭详情
            closeDetail() {
                this.$emit('DetailClose');
                this.firstShopNumber = 0;
            },
            //关闭购物车烂,并将数据存入session
            closeAddShow() {
                this.addPostList();
                this.isAddShow = false;
            },
            addPostList() {
                console.log('选中的商品:' + this.type, this.num, this.firstShopNumber);
                let num = this.num;
                let type = this.type;
                if (num < 1) {
                    type *= 2;
                } else {
                    type *= 2;
                    type += 1;
                }
                this.postList.splice(type, 1, this.firstShopNumber);
                sessionStorage.setItem('change', this.postList);
            },
            // 单机添加购物的+,-不进行关闭串窗口
            StopBubbling() {
                // 阻止冒泡
                event.stopPropagation();
            },
            reduce() {
                // 减少个数
                this.firstShopNumber--;
                this.noReduceClick = false;
                this.noAddClick = false;
                if (this.firstShopNumber < 0 || this.firstShopNumber === 0) {
                    this.firstShopNumber = 0;
                    this.noReduceClick = true;
                }

            },
            plus() {
                // 添加个数
                this.firstShopNumber++;
                this.noReduceClick = false;
                this.noAddClick = false;
                if (this.firstShopNumber > 9 || this.firstShopNumber === 9) {
                    this.firstShopNumber = 9;
                    this.noAddClick = true;
                }
            }
        },
        computed: {}
    }
</script>

<style scoped lang="stylus">
    .fade-enter-active, .fade-leave-active, .fade2-enter-active, .fade2-leave-active
        transition: 1s

    .fade-enter, .fade-leave-to
        transform: translateX(-100%);
        opacity: .8;

    .fade2-enter, .fade2-leave-to
        transform: translateY(100%);
        opacity: .8;

    .commodity-detail-show
        position: absolute
        width 100%
        height: 100%
        top: 0
        background white
        z-index 1
        .commodity-detail-type
            .commodity-detail-item
                .detail-title
                    background-color #1296db
                    color white
                    font-weight bold
                    font-size 0.35rem
                    height: 1rem
                    line-height: 1rem
                    position relative
                    .callback
                        position absolute
                        left 0
                        top: 0
                        bottom 0
                        margin auto
                        width 0.53rem
                        height 0.53rem
                        .back-left, .back-right
                            width 0
                            height 0
                            border 0.25rem solid transparent
                            border-right-color: white
                            position absolute
                            left 0
                        .back-right
                            border-right-color: #1296db
                            left 0.1rem
                .detail-banner
                    .slide
                        img
                            height 10rem
                            width 100%
                .detail-introduce
                    padding-left 0.26rem
                    text-align left
                    h2
                        margin 0
                        font-size: 0.56rem
                    h3
                        margin 0
                        font-size: 0.5rem
                        color red
                        padding-bottom 0.5rem
                    h4
                        margin 0
                .bottom-button
                    position fixed
                    bottom: 0
                    width 100%
                    span, .now-buy
                        display: inline-block
                        color white
                        background-color red
                        width 50%
                        height 1.3rem
                        line-height 1.3rem
                        text-decoration none
                    .add-shop-car
                        background-color #1296db
                .add-shop-item
                    position fixed
                    top 0
                    left: 0
                    bottom 0
                    right 0
                    background-color rgba(0, 0, 0, 0.5)
                    z-index 1
                    .add-shop-content
                        width 100%
                        background-color white
                        height 2rem
                        position fixed
                        bottom 0
                        left: 0
                        right: 0
                        text-align left
                        display flex
                        align-items center
                        justify-content space-between
                        .add-shop-introduce
                            display flex
                            align-items center
                            img
                                width 2.5rem
                                height 2rem
                            .add-shop-text
                                padding-left 0.2rem
                                display inline-block
                                div
                                    line-height 0.8rem
                                .add-shop-pay
                                    color #e8380d
                        .add-shop-num
                            margin-right 0.2rem
                            display flex
                            align-items center
                            .add, .reduce
                                background-color #1296db
                                width 0.6rem
                                height: 0.6rem
                                line-height 0.6rem
                                display: inline-block
                                color white
                                text-align center
                                border-radius 50%
                                font-size 0.5rem
                            .noAddReduce
                                background-color grey
                            .input
                                margin 0 0.2rem
                                width 0.3rem
                                border none
                                font-size 0.5rem
</style>
